<template>
    <div class="show_more">
        <p v-if="visible" @click="visible = false" :style="getBgSty()">
            <el-icon :size="10">
                <ArrowUp />
            </el-icon>
            <span>{{ closeTextTips }}</span>
        </p>
        <p v-else @click="visible = true" :style="getBgSty()">
            <el-icon :size="10">
                <ArrowDown />
            </el-icon>
            <span>{{ showTextTips }}</span>
        </p>

        <slot name="form_info" :visible="visible"></slot>
    </div>
</template>

<script setup lang="ts">
const visible = defineModel("modelValue", {
    type: Boolean,
    required: false,
    default: false,
});

const props = defineProps({
    showTextTips: {
        type: String,
        default: () => "显示更多",
    },
    closeTextTips: {
        type: String,
        default: () => "收起",
    },
    background: {
        type: String,
        default: () => "",
    },
});

const getBgSty = () => {
    let obj: any = {};
    if (props.background) {
        obj.background = props.background;
    } else {
        obj.padding = "0px 12px";
    }
    return obj;
};
</script>

<style scoped lang="scss">
.show_more {
    display: flex;
    flex-direction: column;
    p {
        cursor: pointer;
        text-align: center;
        width: 100%;
        padding: 7px 12px;
        font-weight: 500;
        font-size: 14px;
        color: #999999;
        // background: #f6f9ff;
        border-radius: 6px;
        span {
            margin-left: 6px;
        }
    }
}
</style>
